@import "./variable.styl"

body, html
  line-height: 1
  font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback'
  -webkit-tap-highlight-color: transparent
  background: #f2f2f2

input
  outline: none

input::-moz-placeholder
  color: #cccccc
  opacity: 1

input:-ms-input-placeholder, input::-webkit-input-placeholder
  color: #cccccc

.border-top-1px, .border-right-1px, .border-bottom-1px, .border-left-1px
  position: relative
  &:before, &:after
    content: ""
    display: block
    position: absolute
    transform-origin: 0 0

.border-top-1px
  &:before
    border-top: 1px solid $color-row-line
    left: 0
    top: 0
    width: 100%
    transform-origin: 0 top

.border-right-1px
  &:after
    border-right: 1px solid $color-col-line
    top: 0
    right: 0
    height: 100%
    transform-origin: right 0

.border-bottom-1px
  &:after
    border-bottom: 1px solid $color-row-line
    left: 0
    bottom: 0
    width: 100%
    transform-origin: 0 bottom

.border-left-1px
  &:before
    border-left: 1px solid $color-col-line
    top: 0
    left: 0
    height: 100%
    transform-origin: left 0

@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)
  .border-top-1px
    &:before
      width: 200%
      transform: scale(.5) translateZ(0)
  .border-right-1px
    &:after
      height: 200%
      transform: scale(.5) translateZ(0)
  .border-bottom-1px
    &:after
      width: 200%
      transform: scale(.5) translateZ(0)
  .border-left-1px
    &:before
      height: 200%
      transform: scale(.5) translateZ(0)

@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3)
  .border-top-1px
    &:before
      width: 300%
      transform: scale(.333) translateZ(0)
  .border-right-1px
    &:after
      height: 300%
      transform: scale(.333) translateZ(0)
  .border-bottom-1px
    &:after
      width: 300%
      transform: scale(.333) translateZ(0)
  .border-left-1px
    &:before
      height: 300%
      transform: scale(.333) translateZ(0)

.clearfix
  display: inline-block
  &:after
    content: ""
    height: 0
    line-height: 0
    clear: both
    visibility: hidden

.container
  height: 100%
  margin: 0
  background: #f2f2f2
  font-size: 14px
.section
  margin: 0px;
  padding: 2.41899% 3.833333%
  background-color: #fff
.section:first-child.border-1px::before
  border-bottom: none;
.section:not(:first-child)
  margin-top: 10px
.section-title
  padding: 12px 0
  font-size: 17px
.hide
  display: none
.btn
  display: inline-block
  font-weight: 400
  text-align: center
  white-space: nowrap
  vertical-align: middle
  -webkit-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none
  border: 1px solid transparent
  border-radius: 40px
  padding: 0.345rem 0.75rem
  font-size: 0.68085106rem
  line-height: 1.8
  color: #ffffff
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  background: -webkit-linear-gradient(left, rgb(255,148,85), rgb(255,131,81), rgb(255,111,78), rgb(255,95,75))
  background: linear-gradient(-180deg, #FECD37 0%, #FDB035 92%)
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out
  &:active, &:focus
    color: #ffffff
  &:focus, &:hover
    color: #ffffff
    outline: 0
    text-decoration: none
  &.disabled
    background: rgb(204, 204, 204)
  &.btn-block
    width: 100%
